<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>Toast</h3>
    <div class="content">
      <button @click="toast('','toast normal')">Normal</button>
      <button @click="toast('success','提交成功')">Success</button>
      <button @click="toast('error','提交失败')">error</button>
    </div>
    <h3>Loading</h3>
    <div class="content">
      <button @click="loading">Open</button>
      <button @click="loadingClose">Close</button>
    </div>
    <h3>Pop</h3>
    <div class="content">
      <button @click="pop">Open1</button>
      <button @click="pop2">Open2</button>
      <button @click="pop3">Open3</button>
    </div>

  </div>
</template>

<script setup>
  import {
    useToast
  } from '../views/plugin/alert'
  import {
    useLoading
  } from '../views/plugin/loading'
  import {
    usePop
  } from '../views/plugin/pop'

  defineProps({
    msg: String,
  });
  const Toast = useToast();
  const toast = (type, text) => {
    Toast(text, {
      type: type
    });
  }
  const Loading = useLoading();
  const loading = (text) => {
    Loading(text);
  }
  const loadingClose = () => {
    Loading.close();
  }
  const Pop = usePop();
  const pop = () => {
    Pop({
      text: '测试数据',
    });
  }
  const pop2 = () => {
    Pop({
      text: '请输入完整的数据才能提交哦！',
      okText: '我知道了',
      cancelBtn: false
    });
  }
  const pop3 = () => {
    Pop({
      text: '你确认删除这条信息吗？',
      okText: '确定删除',
      okLoadingText: '删除中',
      ok: () => {
        setTimeout(() => {
          Toast('删除成功！',{type: 'success'})
          Pop.close();
        }, 1000);
        return false;
      }
    });
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h3 {
    margin: 40px 0 0;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }

  .content {
    display: flex;
    padding: 10px;

  }

  .content button {
    margin: 0 10px;
    padding: 5px;
    flex: 1;
  }
</style>
